<template>
  <a-config-provider :locale="zhCN">
    <a-layout class="layout">
      <a-layout-content
        v-if="!$route.meta.noHead"
        :class="($route.name as string)?.includes('Backend') ? 'backend' :'content'"
      >
        <router-view v-slot="{ Component }" :key="activeRoute[0]">
          <component :is="Component"></component>
        </router-view>
      </a-layout-content>
      <router-view v-else></router-view>
      <a-layout-header class="header" v-show="!$route.meta.noHead">
        <p class="title">绿色科学城市智慧决策支持系统</p>
        <a-menu
          :selectedKeys="activeRoute"
          theme="dark"
          mode="horizontal"
          style="flex: 1"
        >
          <a-menu-item v-for="item in menuList" :key="item.router">
            <router-link
              :to="item.router"
              :target="item.router === '/chart' ? '_blank' : '_self'"
              >{{ item.name }}</router-link
            >
          </a-menu-item>
        </a-menu>
        <a-dropdown>
          <p class="user">
            <user-outlined class="avatar" />{{ userStore.userInfo.nickname }}
          </p>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a @click="handleLogOut">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>
    </a-layout>
  </a-config-provider>
</template>

<script lang="ts" setup>
import "ant-design-vue/es/modal/style/css";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import { computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { logout } from "./api";
import { useUserInfo } from "@/store";
import { initMenu } from "@/utils";
const route = useRoute();
const router = useRouter();
// 根据当前的基础路由判断激活的菜单项
const activeRoute = computed(() => [
  route.fullPath.match(/^\/\w+/)?.[0] || "/project",
]);
const userStore = useUserInfo();
const menuList = computed(() => {
  const res = initMenu.filter((item) =>
    item.auth.find((authItem) => userStore.userInfo.roles?.includes(authItem))
  );
  return res;
});
watch([menuList, activeRoute], ([val, path]) => {
  if (!userStore.userInfo.username) return;
  const currentMenu = initMenu.find((item) => path[0] === item.router);
  if (currentMenu && !val.find((item) => item.router === currentMenu.router)) {
    router.replace(val[0].router);
  }
});
const handleLogOut = () => {
  logout()
    .then(() => {
      userStore.refresh({});
      router.push("/login");
    })
    .catch(console.error);
};
</script>
<style lang="scss">
#app {
  height: auto;
  @include set-font(16px, $primary-color, 24px);
}
#app:has(.login) {
  height: 100%;
}
.login-modal {
  .ant-modal {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .ant-modal-content {
    min-height: 100vh;
    background-color: $bg-color;
  }
  .ant-modal-confirm-btns {
    display: none;
  }
  .ant-modal-content {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
  }
  .ant-modal-confirm-body .ant-modal-confirm-content {
    margin: 0;
  }
}
</style>
<style lang="scss" scoped>
.layout {
  height: 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-flow: row nowrap;
  padding: 0 32px;
  z-index: 1;
}
.title {
  color: #fff;
  font-weight: 600;
  margin-right: 16px;
}
.user {
  color: #fff;
  flex: none;
  text-align: right;
  cursor: pointer;
}
.avatar {
  margin-right: 8px;
}
.content {
  padding: 94px 30px 0;
  z-index: 0;
}
.backend {
  padding-top: 64px;
  display: flex;
  flex-flow: row nowrap;
  z-index: 0;
}
</style>
